<!-- 添加热词 -->
<template>
  <div>
    <el-dialog :title="title" :visible.sync="mVisible" v-if="mVisible" @close="dialogClose" :close-on-click-modal="false">

      <el-form :model="data" :rules="rules" ref="DialogForm" size="medium" label-width="100px">
        <el-form-item label="热词名称：" prop="keywords">
          <el-input v-model="data.keywords" placeholder="请输入热词名称"></el-input>
        </el-form-item>
        <el-form-item label="热词排序：" prop="sort">
          <el-input v-model="data.sort" placeholder="请输入热词排序"></el-input>
        </el-form-item>
        <el-form-item label="添加商品：" prop="productList">
          <el-tag style="margin-right: 5px;" v-for="(tag, index) in selectProducts" :key="index" type="danger" closable
                  @close="rmProduct(tag, index)" effect="plain" size="small">
            {{tag.name}}
          </el-tag>
          <span class="click-ele" style="font-size:12px;display: block;margin: 0;" @click="addDialogShow = true">添加商品</span>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleCancle">取 消</el-button>
        <el-button size="medium" :loading="btnLoading" type="primary" @click="handleDiaSub('DialogForm')">确
          定</el-button>
      </span>
    </el-dialog>

    <SelectProduct v-if="addDialogShow" :modalShow.sync="addDialogShow" @selectChange="getAddGoodsList" :isForbidden="false"></SelectProduct>

  </div>
</template>

<script>
import { hotWordFormRules } from '@/utils/rules'
import SelectProduct from '@/components/SelectProduct/selectPro'
import { AddHotWord } from '@/api/onlineMan'
export default {
  name: '',
  components: { SelectProduct },
  data () {
    return {
      title: '添加热词',
      data: {
        keywords: '',
        sort: '',
        status: '1',
        productList: []
      },
      rules: hotWordFormRules,
      btnLoading: false,
      selectProducts: [],
      addDialogShow: false
    }
  },
  props: {
    modalShow: {
      type: Boolean,
      default: false
    }
  },
  watch: {},
  computed: {
    mVisible: {
      get () {
        return this.modalShow
      },
      set (val) {
        this.$emit('update:modalShow', val)
      }
    }
  },
  mounted () { },
  methods: {
    dialogClose () { },
    handleCancle (force) {
      this.$emit('update:modalShow', false)
      if (force) {
        this.$emit('oprRusult', true)
      }
    },
    rmProduct (val, index) {
      this.selectProducts.splice(index, 1)
      this.data.productList.splice(index, 1)
    },
    getAddGoodsList (val) {
      const indexIds = this.selectProducts.map(e => e.id)
      val.forEach(e => {
        if (indexIds.indexOf(e.productId) <= -1) {
          const info = {
            id: e.productId,
            name: e.name
          }
          this.selectProducts.push(info)
          this.data.productList.push({ id: info.id })
        }
      })
    },
    handleDiaSub (formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) return false
        this.btnLoading = true
        let params = JSON.parse(JSON.stringify(this.data))
        AddHotWord(params).then(res => {
          this.btnLoading = false
          this.handleCancle(true)
          this.$message.success(res.message || '操作成功')
        }).catch(e => {
          this.btnLoading = false
        })
      })
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
